<template>
	<div>
		<el-row>
			<el-col :span="20">
				<el-form :model="formData" inline ref="formDataRef">
					<!-- 					<el-form-item label="年份" prop="year">
						<el-date-picker v-model="formData.year" type="year" value-format="yyyy" placeholder="选择年份">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="月份" placeholder="选择月份" prop="month">
						<el-select v-model="formData.month">
							<el-option v-for="item in monthList" :value="item.value" :label="item.month"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="期号">
						<!-- 						<el-select v-model="formData.num" prop="num" @change="numChangeEvent">
							<el-option value="01" label="第1期(10号)"></el-option>
							<el-option value="10" label="第2期(20号)"></el-option>
							<el-option value="20" label="第3期(30号)"></el-option>
						</el-select> -->
						<el-date-picker v-model="formData.qihaoDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
							placeholder="请选择期号" @change="dateDayEvent"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-search" @click="getTableData">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="4" align="right">
				<el-button type="success" @click="AddLivingexpensesEvent(false)"
					v-loading="btn_loading">提交工资</el-button>
			</el-col>
			<el-col :span="24">
				<el-form inline>
					<el-row>
						<el-col :span="24">
							<el-form-item label="统一工资设置" label-width="120">
								<el-input v-model="uniformamount" @blur="uniformamountEvent"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-col>
			<el-col :span="24">
				<el-table class="usertable" :data="tableData" border @select="TableSelectEvent"
					@row-click="RowClickEvent" :cell-style="{ padding: '5px 0 ' }">
					<!-- <el-table-column type="selection" width="55" align="center" /> -->
					<el-table-column type="index" label="序号" width="50" align="center" :index="indexMethod" />
					<el-table-column label="姓名" align="center" prop="UserName" />
					<el-table-column label="工号" align="center" prop="UserNumber" />
					<el-table-column label="银行卡" align="center" prop="BankName" />
					<el-table-column label="银行卡号" align="center" prop="BankCardNumber" />
					<el-table-column label="工资" align="center" prop="Money">
						<template slot-scope="scope">
							<el-input v-if="scope.row.isShow" v-model="scope.row.Money"
								@blur="CheckAmountEvent(scope.row, 'Money')"></el-input>
							<p v-else>{{ scope.row.Money }}</p>
						</template>
					</el-table-column>
					<el-table-column label="社保" align="center" prop="Socialinsurance" v-if="formData.istent">
						<template slot-scope="scope">
							<el-input v-if="scope.row.isShow" v-model="scope.row.Socialinsurance"
								@blur="CheckAmountEvent(scope.row, 'Socialinsurance')"></el-input>
							<p v-else>{{ scope.row.Socialinsurance }}</p>
						</template>
					</el-table-column>
				</el-table>
			</el-col>

			<!-- 			<el-col :span="24" align="right">
				<el-pagination @size-change="getTableData" @current-change="getTableData"
					:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
					:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
					:total.sync="pagination.total">
				</el-pagination>
			</el-col> -->
		</el-row>

		<el-dialog append-to-body title="提示" :visible.sync="dialogVisible" width="30%" @close="dialogVisible = false">
			<div style="display: flex;flex-direction: column;gap: 10px;">
				<span>你确定要提交此计划单吗?</span>
				<div style="display: flex;align-items: center">
					<el-checkbox v-model="LivingObj.Livingexpenses.Settlement" style="margin-right: 10px;"
						@change="checkboxSettlement">年度开账<span
							style="color:#E6A23C">(年度开账将结算上一年度数据)</span></el-checkbox>
				</div>
				<div v-show="LivingObj.Livingexpenses.Settlement">
					扎帐年份：<el-date-picker v-model="newSettlementNumber" type="year" value-format="yyyy"
						placeholder="选择年份" @change="SettlementNumberEvent"></el-date-picker>
				</div>
				<div v-if="!CheckSettlementResult.Status">
					<p style="color: #E6A23C;margin:5px 0px !important; ">{{ CheckSettlementResult.Message }}</p>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="IsUpSettlementHandler(false)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	CheckAmount
} from "../../../../public/Scriput/Public.js"
import dayjs from 'dayjs'
export default {
	props: {
		mainshow: {
			type: Boolean,
			required: true
		}
	},
	data() {
		return {
			monthList: [{
				month: "1月份",
				value: '01'
			},
			{
				month: "2月份",
				value: '02'
			},
			{
				month: "3月份",
				value: '03'
			},
			{
				month: "4月份",
				value: '04'
			},
			{
				month: "5月份",
				value: '05'
			},
			{
				month: "6月份",
				value: '06'
			},
			{
				month: "7月份",
				value: '07'
			},
			{
				month: "8月份",
				value: '08'
			},
			{
				month: "9月份",
				value: '09'
			},
			{
				month: "10月份",
				value: '10'
			},
			{
				month: "11月份",
				value: '11'
			},
			{
				month: "12月份",
				value: '12'
			},
			],
			formData: {
				qihaoDate: '',
				year: '',
				month: '',
				num: '',
			},
			mainUserList: [],
			selectUserList: [],
			tableData: [],
			//分页数据绑定
			pagination: {
				currentPage: 1,
				pagesizes: [10, 20, 30, 40, 50],
				pagesize: 10,
				total: 100
			},
			username: '',
			LivingObj: {
				Livingexpenses: {
					LivingeBatch: "",
					Settlement: false,
					OrderStatus: 0,
					SettlementNumber: ''
				},
				Livingexpensesinfo: [{
					Id: 0,
					Delete: false,
					LivingexpensesId: 0,
					UserId: 0,
					Money: 0,
					Socialinsurance: 0
				}],
			},
			newLivingeBatch: '',
			ApprovalList: [],
			dialogVisible: false,
			CheckSettlementResult: {
				Status: false,
			},
			newSettlementNumber: '',
			//统一金额
			uniformamount: '',
			//数据提交中
			btn_loading: false,
		}
	},
	watch: {
		mainshow: {
			handler(val) {
				let nowtime = dayjs(Date())
				this.formData.year = nowtime.format('YYYY')
				this.formData.month = (nowtime.month() + 1) >= 10 ? (nowtime.month() + 1) : '0' + (nowtime.month() + 1)
				this.formData.num = nowtime.day() >= 20 ? '20' : nowtime.day() >= 10 ? '10' : '01'
				this.getTableData()
				this.uniformamount = ''
			},
			immediate: true,
			deep: true,
		}
	},
	created() {
		this.GetLivingOrderStateResponse()
	},
	computed: {
		getMessage() {
			let result = {
				message: '',
				color: 'black'
			}
			let index = this.ApprovalList.findIndex(x => x.Value == this.LivingObj.Livingexpenses.OrderStatus)
			if (index > -1) result.message = this.ApprovalList[index].Description
			result.color = this.LivingObj.Livingexpenses.OrderStatus == 0 ? '#E6A23C' : this.LivingObj.Livingexpenses
				.OrderStatus == 1 ? '#409EFF' : '#67C23A'
			return result
		}
	},
	methods: {
		//表格序号
		indexMethod(index) {
			return index + 1
		},
		//获取表格数据
		getTableData() {
			this.$http.post('Livingexpenses/CreateGetLivingexpensesUsers').then(res => {
				const {
					StatusCode,
					Data
				} = res.data || 0
				if (StatusCode == 200) {
					this.tableData = Data.map(x => {
						return {
							Id: 0,
							LivingexpensesId: 0,
							UserId: x.Id,
							UserName: x.UserName,
							UserNumber: x.UserNumber,
							BankName: x.BankName,
							BankCardNumber: x.BankCardNumber,
							isShow: false,
							Money: 0,
							Socialinsurance: 0,
						}
					})
					const {
						year,
						month,
						num
					} = this.formData || ''
					this.$http.post('Livingexpenses/GetLivingexpensesUsers', {
						livingeBatch: year + '-' + month + '-' + num
					}).then(dres => {
						this.newLivingeBatch = year + '-' + month + '-' + num
						if (dres.data.StatusCode == 200) {
							this.LivingObj = dres.data.Data
							if (this.LivingObj.Livingexpensesinfo.length) {
								this.LivingObj.Livingexpensesinfo.forEach(x => {
									let index = this.tableData.findIndex(f => f.UserId == x
										.UserId)
									if (index > -1) {
										this.tableData[index].Money = x.Money
										this.tableData[index].Socialinsurance = x
											.Socialinsurance
										this.tableData[index].LivingexpensesId = x
											.LivingexpensesId
										this.tableData[index].Id = x.Id
									}
								})
							}
						}
					})
				}
			})
		},
		//表格选择项
		RowClickEvent(row) {
			// value.forEach(x=>x.isShow = true )
			if (this.LivingObj.Livingexpenses.Settlement == '' || this.LivingObj.Livingexpenses.Settlement == null) row
				.isShow = true
			else row.isShow = false
		},
		//表格选中
		TableSelectEvent(values, row) {
			this.selectUserList = values
		},
		//数字校验
		CheckAmountEvent(row, type) {
			const {
				Money,
				Socialinsurance
			} = row || ''
			let num
			if (type == 'Money') num = Money
			else num = Socialinsurance
			if (!CheckAmount(num)) {
				if (type == 'Money') row.Money = 0
				else row.Socialinsurance = 0
				this.$message.warning('请输入有效的金额(保留2位小数)')
			} else {
				let index = this.mainUserList.findIndex(x => x.Id == row.Id)
				if (index > -1) {
					if (type == 'Money') this.mainUserList[index].Money = row.Money
					else this.mainUserList[index].Socialinsurance = row.Socialinsurance
				}
				// row.isShow = false
			}
		},
		//添加生活数据
		AddLivingexpensesEvent(isApproval) {
			let url, params
			//编辑
			if (this.LivingObj.Livingexpenses.Id) {
				url = 'Livingexpenses/UpLivingexpenses'
				params = {
					UpOrAudit: 0,
					livingexpenses: {
						...this.LivingObj.Livingexpenses
					},
					livingexpensesinfo: []
				}
				params.livingexpensesinfo = this.tableData.filter(x => x.Money > 0)
			} else {
				url = 'Livingexpenses/AddLivingexpenses'
				params = {
					livingexpenses: {
						livingeBatch: this.newLivingeBatch,
						Id: 0,
						Delete: false,
						Settlement: "",
						OrderStatus: 0,
						SettlementNumber: '',
					},
					livingexpensesinfo: [],
				}
				params.livingexpensesinfo = this.tableData.filter(x => x.Money > 0)
				params.livingexpenses.Settlement = this.LivingObj.Livingexpenses.Settlement
			}
			if (this.LivingObj.Livingexpenses.Settlement) params.livingexpenses.SettlementNumber = this.formData.year

			if (params.livingexpensesinfo.length == 0) {
				this.$message.warning('请填写有效的数据!')
				return
			}
			this.btn_loading = true
			this.$http.post(url, {
				...params
			}).then(res => {
				const {
					StatusCode,
					Data,
					Message,
				} = res.data || 0
				this.btn_loading = false
				if (StatusCode == 200) {
					if (!isApproval) this.$message.success('提交成功!')
					else this.$message.success('审批成功!')
					this.dialogVisible = false
					this.$parent.$parent.PayrollFormNewAdd.show = false
				} else {
					this.$message.warning(Message)
					this.dialogVisible = false
				}
			}).catch(() => { this.btn_loading = false })
		},
		//审批
		ApprovalEvent() {
			let params = {
				livingexpenses: {
					...this.LivingObj.Livingexpenses
				},
				livingexpensesinfo: []
			}
			params.livingexpensesinfo = this.selectUserList.map(x => {
				return {
					...x,
				}
			})
			this.$http.post('Livingexpenses/UpLivingexpenses', {
				...params
			}).then(res => {
				const {
					StatusCode,
					Data
				} = res.data || 0
				if (StatusCode == 200) {
					this.$message.success('提交成功!')
				}
			})
		},
		//获取审批枚举类型
		GetLivingOrderStateResponse() {
			this.$http.post('Livingexpenses/GetLivingOrderStateResponse').then(res => {
				const {
					StatusCode,
					Data
				} = res.data || 0
				if (StatusCode == 200) this.ApprovalList = Data
			})
		},
		checkboxSettlement(value) {
			if (!value) {
				this.LivingObj.Livingexpenses.SettlementNumber = ''
				this.CheckSettlementResult = {
					Status: false,
				}
			}
		},
		//时间选择事件
		SettlementNumberEvent(value) {
			if (value == '') return
			this.$http.post('Livingexpenses/CheckSettlement', {
				settlementNumber: value,
				projectId: 0
			}).then(res => {
				this.CheckSettlementResult = res.data
			})
		},
		//修改已经扎帐订单,请谨慎操作
		IsUpSettlementHandler() {
			//不存在已扎帐
			if (this.CheckSettlementResult.StatusCode == 200) {
				this.AddLivingexpensesEvent(false)
			} else {
				//存在已扎帐,修改原数据
				this.$http.post('Livingexpenses/UpSettlement', {
					settlementNumber: this.LivingObj.Livingexpenses.SettlementNumber,
					projectId: 0
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.AddLivingexpensesEvent(false)
					} else {
						this.$message.warning(Message)
					}
				})
			}
		},
		numChangeEvent() {
			const {
				year,
				month,
				num
			} = this.formData || ''
			if (year != '' && month != '' && num != '') this.getTableData()
		},
		uniformamountEvent() {
			this.tableData.forEach(x => {
				x.Money = this.uniformamount
			})
		},
		//期号变更
		dateDayEvent(value) {
			if (value == '' || value == null) {
				this.formData.year = ''
				this.formData.month = ''
				this.formData.num = ''
			} else {
				let dates = value.split('-')
				this.formData.year = dates[0]
				this.formData.month = dates[1]
				this.formData.num = dates[2]
			}
		},
	}
}
</script>

<style scoped>
.approvalClass {
	position: absolute;
	right: 40px;
	text-align: center;
}

.approvalMessage {
	font-weight: bold;
	font-size: 24px;
	font-style: oblique;
	margin-bottom: 5px !important;
	margin-top: 0px !important;
}

.approvalzhazhang {
	font-weight: bold;
}
</style>